<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <!--  账号管理-->
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 Element UI 样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/theme-chalk/index.css">
    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入 Element UI 脚本文件 -->
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>
    <!-- 引入 axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入 导航栏css 需要通过服务器请求-->
    <link rel="stylesheet" href="/css/nav.css" />
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .sea {
            margin: 20px 25px 0px 22px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        body::-webkit-scrollbar {    /* 隐藏滚动条 */
            display: none;/* Chrome, Safari, and Opera */
        }
        /*分页*/
        .block {
            padding: 10px;
            background: #fff;
            border: none;
            text-align: right;
            width: 100%;
            height: 30px;
            z-index: 2;
            position: fixed;
            bottom: 0;
            right: 0;
            box-shadow: 0px 0px 10px 1px #a0a0a0;
        }
    </style>
</head>
<body>
<div id="app">
    <div th:replace="nav :: nav"></div>
    <!-- 水印层 -->
    <div class="watermark">{{userNowName}} {{user}}</div>
    <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <div style="margin-top: 70px;"></div>
        <div class="sea">
            <!--     面包屑导航 -->
            <div>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item><a th:href="@{/}">首页</a></el-breadcrumb-item>
                    <el-breadcrumb-item>后台管理</el-breadcrumb-item>
                    <el-breadcrumb-item>账号管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <!-- 姓名搜索 日期范围搜索-->
            <div class="select" style="display: flex;">
                <div>
                    <el-input placeholder="请输入查询姓名" v-model="selectName" class="input-with-select" size="mini" clearable></el-input>
                </div>
                <div style=" margin: 0 20px">
                    <el-input placeholder="请输入查询账号" v-model="selectUserName" class="input-with-select" size="mini" clearable></el-input>
                </div>
                <el-button slot="append" size="mini" icon="el-icon-search" @click="searchList()">查询</el-button>
            </div>
            <!-- 重置 -->
            <div>
                <el-row>
                    <el-button size="small" type="warning" icon="el-icon-refresh" @click="reload()">重置</el-button>
                </el-row>
            </div>
        </div>
        <!-- stripe属性可以创建带斑马纹的表格； border表格边框 -->
        <el-table size="mini" :data="originalData" stripe style="width: 100%;  margin: 0 0 50px;" >
            <!--  序号-->
            <el-table-column type="index" width="100" align="center"></el-table-column>
            <!-- 员工姓名 -->
            <el-table-column prop="z_name" label="员工姓名"  align="center"  width="110"></el-table-column>
            <!-- 账号 -->
            <el-table-column prop="username" label="账号"  align="center"  width="200"></el-table-column>
            <!-- 密码 -->
            <el-table-column prop="password" label="密码"  align="center"  width="200"></el-table-column>
            <!-- 状态 -->
            <el-table-column label="状态" width="120" align="center">
                <template slot-scope="scope">
                    <span>
                        <span v-if="scope.row.userState === 'true'"><span style="color: rgb(0, 255, 0);font-size: 20px;">• </span> 启用</span>
                        <span v-else><span style="color: rgb(183, 183, 183);font-size: 20px;">• </span> 禁用</span>
                    </span>                
                </template>
            </el-table-column>
            <!-- 创建时间 -->
            <el-table-column prop="create_time" label="创建日期" sortable width="220" align="center">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i><span style="margin-left: 5px">{{ scope.row.create_time }}</span>
                </template>
            </el-table-column>
            <!-- 更新时间 -->
            <el-table-column prop="create_time" label="更新时间" sortable width="220" align="center">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i><span style="margin-left: 5px">{{ scope.row.update_time }}</span>
                </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column label="操作"  align="center">
                <template slot-scope="scope" >
                    <span>
                        <span v-if="scope.row.userState !== 'true'"> 
                                <el-link  style="font-size: 10px;" type="danger"  icon="el-icon-key" @click="enable(scope.$index, scope.row);">启用</el-link>                   
                        </span>
                        <span v-else>
                                <el-link  type="danger"  style="font-size: 10px;" icon="el-icon-lock" @click="disable(scope.$index, scope.row);">禁用</el-link>  
                        </span>  
                    </span>
                   &nbsp;&nbsp;
                    <el-link type="danger" style="font-size: 10px;" icon="el-icon-edit" @click="changePassword(scope.$index, scope.row);">修改密码</el-link>
                </template>
            </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="block">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[15,30,50,100,200]" :page-size="pageSize"   layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
            </div>
            <!--  修改密码 对话框-->
            <el-dialog title="修改密码" :visible.sync="editDialogVisible" width="25%" :close-on-click-modal="false">
                <el-form :model="form" label-width="100px" size="small" :inline="true" :rules="rules" ref="editedFrom">
                    <el-form-item label="账号:" prop="username" >
                        <el-input v-model="form.username" autocomplete="off" :style="{ width: '200px' }"  :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="原密码:" prop="password">
                        <el-input v-model="form.password" autocomplete="off" :style="{ width: '200px' }" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码:" prop="password1">
                        <el-input v-model="form.password1" autocomplete="off" show-password :style="{ width: '200px' }"></el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码:" prop="password2">
                        <el-input v-model="form.password2" autocomplete="off" show-password :style="{ width: '200px' }" ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="edit()">确 定</el-button>
                </div>
            </el-dialog>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            user: JSON.parse(localStorage.getItem("user")),
            userRole1: '',//	administrator的权限,boolen
            userRole2: '',//  user的   boolen
            userNowdata: '', // 当前用户的所有数据
            activeIndex: '4-1',
            userNowName: '',//当前用户姓名

            loading: true, //加载动画
            originalData: [], // 当前页面数据
            total: 0, //总条数
            pageNum: 1, //第几页
            pageSize: 15, //每页几条数据
            z_name:'',// 员工姓名
            username:'',// 账号
            selectName:'' ,// 查询姓名
            selectUserName:'',// 查询账号（用户名）
            editDialogVisible:false,// 默认不显示修改密码对话框
            form: {}, 
            rules: {
                password1: [
                    { required: true, message: '请输入新密码', trigger: 'blur' }
                ],
                password2: [
                { required: true, message: '请再次输入新密码', trigger: 'blur' }
                ]
            },
            logData : {// 日志信息 (公用)
                operator: '',
                logType: '',
                recordTime: '',
                operatorIP: "192.168.2.21",
                requestType: '',
                requestInterface: '',
                requestParameters: '',
                responseType: '',
                resdata:'',
                error:''
            },

        },
        created() {
            this.getUserRole(); // 加载用户权限
            // 模拟加载动画
            setTimeout(() => {
                this.loading = false;
            }, 500); // 1秒后执行
        },
        methods: {
            // 账号退出(通用）
            logoutButton() {
                axios.get("/user/logout")
            },
            // 用户权限（通用）
            getUserRole() {
                axios.get("/user/now?username=" + this.user)
                    .then(res => {
                        this.userRole1 = (res.data.UserNowdata[0].role === 'administrator')
                        this.userRole2 = (res.data.UserNowdata[0].role === 'user')
                        this.userNowdata = res.data.UserNowdata
                        this.userNowName = this.userNowdata[0].z_name;
                        this.getUserList();
                        // 访问请求的相关信息,写进日志
                        this.getLog(res);
                        axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                    });
            },
            // 重置页面
            reload(){
                window.location.reload()
            },
            // 分页
            handleSizeChange(val) {
                this.pageSize = val;
                console.log(`每页 ${this.pageSize} 条`);
                this.getUserList();
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                console.log(`当前页: ${val}`);
                this.getUserList();
            },
            // 请求 账号 分页数据
            getUserList() {
                axios.get("/user/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&z_name=" + this.z_name + "&id=&address=&create_time=&username=" + this.username)
                    .then(res => {
                        this.originalData = res.data.Userdata;
                        this.total = res.data.total;
                        // 访问请求的相关信息,写进日志
                        this.getLog(res);
                        axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                    });
            },
            // 姓名、账号，单个/组合搜索
            searchList(){
                this.pageNum = 1; //不先把页面等于1的话，有些会搜索不到
                this.z_name = this.selectName; // 搜索的名字
                this.username = this.selectUserName; // 搜索的账号
                this.getUserList();
            },
            // 操作  启用
            enable(index, row) {
                let nowDate = new Date().toLocaleString(); // 获取当前时间
                axios.post("/account/enable" , { update_time: nowDate, id: row.id})
                    .then(res => {
                        this.getUserList();
                        // 访问请求的相关信息,写进日志
                        this.getLog(res);
                        axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                    });
                // console.log(index, row);
            },
            // 操作  禁用
            disable(index, row) {
                let nowDate = new Date().toLocaleString(); // 获取当前时间
                axios.post("/account/disable" , { update_time: nowDate, id: row.id})
                    .then(res => {
                        this.getUserList();
                        // 访问请求的相关信息,写进日志
                        this.getLog(res);
                        axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                    });
                // console.log(index, row);
            },
            // 操作  修改密码
            changePassword(index, row) {
                this.form = { ...(row) };
                this.editDialogVisible = true;
                // console.log(index, row);
            },
            edit() {
                if (this.form.password1 === this.form.password2) {
                    let nowDate = new Date().toLocaleString(); // 获取当前时间
                    console.log(this.form);
                    axios.post("/account/changepsw", { password: this.form.password1,update_time: nowDate, id: this.form.id })
                    .then(res => {
                        this.editDialogVisible = false;
                        this.$message({message: '密码修改成功！', type: 'success'});
                        this.getUserList();
                        // 访问请求的相关信息,写进日志
                        this.getLog(res);
                        axios.post('/log', {  ...this.logData, logType: '操作日志'} )
                    });
                }else{
                    this.$message.error('两次密码不一致!');
                }
            },
            // 从接口的res 获取日志 (公用）
            getLog(res){
                this.logData.operator = this.user, // 操作者
                    this.logData.recordTime = new Date().toLocaleString(), // 记录时间
                    // this.logData.operatorIP = 操作者ip
                    this.logData.requestType = res.config.method; // 请求类型
                this.logData.requestInterface = '/api'+ res.config.url;// 请求URL
                this.logData.requestParameters = res.config.data; // 请求参数
                this.logData.responseType = res.headers['content-type'];// 实体主体的媒体类型
                this.logData.resdata = JSON.stringify(res.data).substring(0, 5000);// 响应数据 数组转成字符串，最大写入量5000
            },

        }
    });
</script>